<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>W3.CSS Reference</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="Keywords" content="HTML, Python, CSS, SQL, JavaScript, How to, PHP, Java, C++, jQuery, Bootstrap, C#, Colors, W3.CSS, XML, MySQL, Icons, NodeJS, React, Graphics, Angular, R, AI, Git, Data Science, Code Game, Tutorials, Programming, Web Development, Training, Learning, Quiz, Courses, Lessons, References, Examples, Source code, Demos, Tips">
  <meta name="Description" content="Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more.">
  <link rel="stylesheet" href="w3.css">
</head>
<body>
  <h1>W3.CSS Reference</h1>
  <hr>

  <h2>W3.CSS Classes</h2>
  <div class="w3-row">
  <div class="w3-col m4">
    <ul style="margin-top:0px;margin-bottom:0px">
      <li><a href="#container">Container</a></li>
      <li><a href="#table">Table</a></li>
      <li><a href="#card">Card</a></li>
      <li><a href="#responsive">Responsive</a></li>
      <li><a href="#layout">Layout</a></li>
      <li><a href="#navigation">Navigation</a></li>
      <li><a href="#button">Button</a></li>
    </ul>
  </div>
  <div class="w3-col m4">
    <ul style="margin-top:0px;margin-bottom:0px">
      <li><a href="#input">Input</a></li>
      <li><a href="#modal">Modal</a></li>
      <li><a href="#animation">Animation</a></li>
      <li><a href="#font">Font and Text</a></li>
      <li><a href="#display">Display</a></li>
      <li><a href="#effect">Effect</a></li>
      <li><a href="#backgroundcolor">Background Color</a></li>
    </ul>
  </div>
  <div class="w3-col m4">
   <ul style="margin-top:0px;margin-bottom:0px">
      <li><a href="#textcolor">Text Color</a></li>
      <li><a href="#hover">Hover</a></li>
      <li><a href="#round">Round</a></li>
      <li><a href="#padding">Padding</a></li>
      <li><a href="#margin">Margin</a></li>
      <li><a href="#border">Border</a></li>
    </ul>
  </div>
  </div>
  <hr>
  
  <h2><a id="container">Container Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-container</td>
    <td>HTML container with 16px left and right padding</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Used as header</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Used as footer</td>
   </tr>
   <tr>
    <td>w3-panel</td>
    <td>HTML container with 16px left and right padding and 16px top and bottom margin</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Used to display a note</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Used to display a quote</td>
   </tr>
   <tr>
    <td>w3-badge</td>
    <td>Circular badge</td>
   </tr>
   <tr>
    <td>w3-tag</td>
    <td>Rectangular tag</td>
   </tr>
   <tr>
    <td>w3-ul</td>
    <td>Unordered list</td>
   </tr>
   <tr>
    <td>w3-display-container</td>
    <td>Container for w3-display-<em>classes</em> (enables positioning of elements 
    inside the container)</td>
   </tr>
   <tr>
    <td>w3-block</td>
    <td>Class that can be used to define a full width for any element</td>
   </tr>
   <tr>
    <td>w3-code</td>
    <td>Code container</td>
    <td>
   </tr>
   <tr>
    <td>w3-codespan</td>
    <td>Inline code container (for code snippets)</td>
    <td>
   </tr>
   <tr>
    <td>w3-content</td>
    <td>Container for fixed size centered content</td>
   </tr>
   <tr>
    <td>w3-auto</td>
    <td>Container for responsive size centered content</td>
   </tr>
   <tr>
    <td>w3-stretch</td>
    <td>Class that removes right and left margins (especially useful for stretching padded rows (w3-row-padding))</td>
   </tr>
  </tbody></table>
  
  <hr>
  <h2><a id="table">Table Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-table</td>
    <td>Container for an HTML table</td>
   </tr>
   <tr>
    <td>w3-striped</td>
    <td>Striped table</td>
   </tr>
   <tr>
    <td>w3-border</td>
    <td>Bordered table</td>
   </tr>
   <tr>
    <td>w3-bordered</td>
    <td>Bordered lines</td>
   </tr>
   <tr>
    <td>w3-centered</td>
    <td>Centered table</td>
   </tr>
   <tr>
    <td>w3-hoverable</td>
    <td>Hoverable table</td>
   </tr>
   <tr>
    <td>w3-table-all</td>
    <td>All properties set</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>With w3-striped, w3-border, and w3-bordered</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>With colored head</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>With w3-responsive</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>With w3-tiny</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>With w3-small</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>With w3-large</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>With w3-xlarge</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>With w3-xxlarge</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>With w3-xxxlarge</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>With color</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>With w3-jumbo</td>
   </tr>
   <tr>
    <td>w3-responsive</td>
    <td>Creates a responsive table</td>
   </tr>
  </tbody></table>
  <hr>
  <h2><a id="card">Card Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-card</td>
    <td>Same as w3-card-2</td>
   </tr>
   <tr>
    <td>w3-card-2</td>
    <td>Container for any HTML content (2px bordered shadow)</td>
   </tr>
   <tr>
    <td>w3-card-4</td>
    <td>Container for any HTML content (4px bordered shadow)</td>
   </tr>
  </tbody></table>
  <hr>
  <h2><a id="responsive">Responsive Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-row</td>
    <td>Container for one row of fluid responsive content</td>
   </tr>
   <tr>
    <td>w3-row-padding</td>
    <td>Row where all columns have a default padding</td>
   </tr>
   <tr>
    <td>w3-auto</td>
    <td>Container for responsive size centered content</td>
   </tr>
   <tr>
    <td>w3-stretch</td>
    <td>Class that removes right and left margins</td>
   </tr>
   <tr>
    <td>w3-half</td>
    <td>Half (1/2) screen column container</td>
   </tr>
   <tr>
    <td>w3-third</td>
    <td>Third (1/3) screen column container</td>
   </tr>
   <tr>
    <td>w3-twothird</td>
    <td>Two third (2/3) screen column container</td>
   </tr>
   <tr>
    <td>w3-quarter</td>
    <td>Quarter (1/4) screen column container</td>
   </tr>
   <tr>
    <td>w3-threequarter</td>
    <td>Three quarters (3/4) screen column container</td>
   </tr>
   <tr>
    <td>w3-col</td>
    <td>Column container for any HTML content</td>
   </tr>
   <tr>
    <td>w3-rest</td>
    <td>Occupies the rest of the column width</td>
   </tr><tr>
    <td>l1 - l12</td>
    <td>Responsive sizes for large screens</td>
   </tr>
   <tr>
    <td>m1 - m12</td>
    <td>Responsive sizes for medium screens</td>
   </tr>
   <tr>
    <td>s1 - s12</td>
    <td>Responsive sizes for small screens</td>
   </tr><tr>
    <td>w3-hide-small</td>
    <td>Hide content on small screens (less than 601px)</td>
   </tr><tr>
    <td>w3-hide-medium</td>
    <td>Hide content on medium screens</td>
   </tr><tr>
    <td>w3-hide-large</td>
    <td>Hide content on large screens (larger than 992px)</td>
   </tr>
   <tr class="w3-white">
    <td>w3-image</td>
    <td>Responsive image</td>
    <td>
   </tr>
   <tr class="w3-white">
    <td>w3-mobile</td>
    <td>Adds mobile-first responsiveness to any element.<br>Displays 
    elements as block elements on mobile devices.</td>
    <td>
   </tr>
  </tbody></table>
  <hr>
  <h2><a id="layout">Layout Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
    <tr>
      <td>w3-cell-row</td>
      <td>Container for layout columns (cells).</td>
    </tr>
    <tr>
      <td>w3-cell</td>
      <td>Layout column (cell).</td>
    </tr>
    <tr>
      <td>w3-cell-top</td>
      <td>Aligns content at the top of a column (cell).</td>
    </tr>
    <tr>
      <td>w3-cell-middle</td>
      <td>Aligns content at the vertical middle of a column (cell).</td>
    </tr>
    <tr>
      <td>w3-cell-bottom</td>
      <td>Aligns content at the bottom of a column (cell).</td>
    </tr>
  </tbody></table>
  <hr>
  
  <h2><a id="navigation">Bar Classes - Navigation</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-bar</td>
    <td>Horizontal bar</td>
   </tr>
   <tr>
    <td>w3-bar-block</td>
    <td>Vertical bar</td>
   </tr>
   <tr>
    <td>w3-bar-item</td>
    <td>Provides common style for bar items</td>
   </tr>
   <tr>
    <td>w3-sidebar</td>
    <td>Side bar</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>A side bar can contain all types of content</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>A side bar overlaying main content</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>A side bar overlaying all main content</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>A side bar shifting main content to the right</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>A side bar with an overlay background</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>A Side bar on the right side</td>
   </tr>
   <tr>
   </tr><tr>
    <td>w3-collapse</td>
    <td>Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class</td>
   </tr>
   <tr>
    <td>w3-main</td>
    <td>Container for page content when using the w3-collapse class for responsive side navigations</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Fully automatic right-sided responsive side navigation</td>
   </tr>
  </tbody></table>
  <hr>
  
  <h2><a id="button">Dropdown Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <td>w3-dropdown-click</td>
    <td>Clickable dropdown element</td>
   </tr>
   <tr>
    <td>w3-dropdown-hover</td>
    <td>Hoverable dropdown element</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Hoverable dropdown element (used in w3-bar)</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Hoverable dropdown element (used in w3-bar-block)</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Hoverable dropdown element (used in w3-sidebar)</td>
   </tr>
  </tbody></table>
  <hr>
  
  <h2><a id="button">Button Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-button</td>
    <td>Rectangular button with grey background color on hover</td>
   </tr>
   <tr>
    <td>w3-btn</td>
    <td>Rectangular button with shadows on hover</td>
   </tr>
   <tr>
    <td>w3-circle</td>
    <td>Can be used to create a circular button</td>
   </tr>
   <tr>
    <td>w3-ripple</td>
    <td>Rectangular button with ripple effect</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Circular floating button with ripple effect</td>
   </tr>
   <tr>
    <td>w3-bar</td>
    <td>Can be used to group elements (like buttons) in an horizontal bar</td>
   </tr>
   <tr>
    <td>w3-block</td>
    <td>Class that can be used to define a full width w3-button</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Full width w3-btn</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Full width circular button</td>
   </tr>
  </tbody></table>
  
  <hr>
  <h2><a id="input">Input Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-input</td>
    <td>Input elements</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Input form as a card</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Input elements (top labels)</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Input elements (bottom labels)</td>
   </tr>
   <tr>
    <td>w3-check</td>
    <td>Checkbox input type</td>
   </tr>
   <tr>
    <td>w3-radio</td>
    <td>Radio input type</td>
   </tr>
   <tr>
    <td>w3-select</td>
    <td>Input select element</td>
   </tr>
   <tr>
    <td>w3-animate-input</td>
    <td>Animates the width of an input to 100%</td>
   </tr>
  </tbody></table>
  <hr>
  
  <h2><a id="modal">Modal Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-modal</td>
    <td>Modal container</td>
   </tr>
   <tr>
    <td>w3-modal-content</td>
    <td>Modal pop-up element</td>
   </tr>
   <tr>
    <td>w3-tooltip</td>
    <td>Tooltip element</td>
   </tr>
   <tr>
    <td>w3-text</td>
    <td>Tooltip text</td>
   </tr>
  </tbody></table>
  <hr>
  <h2><a id="animation">Animation Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-animate-top</td>
    <td>Animates an element from the top -300px to 0px</td>
   </tr>
   <tr>
    <td>w3-animate-left</td>
    <td>Animates an element from left -300px to 0px</td>
   </tr>
   <tr>
    <td>w3-animate-bottom</td>
    <td>Animates an element from the bottom -300px to 0px</td>
   </tr>
   <tr>
    <td>w3-animate-right</td>
    <td>Animates an element from right -300px to 0px</td>
   </tr>
   <tr>
    <td>w3-animate-opacity</td>
    <td>Animates an element's opacity from 0 to 1</td>
   </tr>
   <tr>
    <td>w3-animate-zoom</td>
    <td>Animates an element from 0 to 100% in size</td>
   </tr>
   <tr>
    <td>w3-animate-fading</td>
    <td>Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out)</td>
   </tr>
   <tr>
    <td>w3-spin</td>
    <td>Spin an icon 360 degrees</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Spin any element 360 degrees</td>
   </tr>
   <tr>
    <td>w3-animate-input</td>
    <td>Animates the width of an input field to 100%</td>
   </tr>
  </tbody></table>
  <hr>
  <h2><a id="font">Font and Text Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-tiny</td>
    <td>Specifies a font size of 10 pixels</td>
   </tr>
   <tr>
    <td>w3-small</td>
    <td>Specifies a font size of 12 pixels</td>
   </tr>
   <tr>
    <td>w3-large</td>
    <td>Specifies a font size of 18 pixels</td>
   </tr>
   <tr>
    <td>w3-xlarge</td>
    <td>Specifies a font size of 24 pixels</td>
   </tr>
   <tr>
    <td>w3-xxlarge</td>
    <td>Specifies a font size of 32 pixels</td>
   </tr>
   <tr>
    <td>w3-xxxlarge</td>
    <td>Specifies a font size of 48 pixels</td>
   </tr>
   <tr>
    <td>w3-jumbo</td>
    <td>Specifies a font size of 64 pixels</td>
   </tr>
   <tr>
    <td>w3-wide</td>
    <td>Specifies a wider text</td>
   </tr>
   <tr>
    <td>w3-serif</td>
    <td>Changes the font to serif</td>
   </tr>
   <tr>
    <td>w3-sans-serif</td>
    <td>Changes the font to sans-serif</td>
   </tr>
   <tr>
    <td>w3-cursive</td>
    <td>Changes the font to cursive</td>
   </tr>
   <tr>
    <td>w3-monospace</td>
    <td>Changes the font to monospace</td>
   </tr>
  </tbody></table>
  <hr>
  
  <h2><a id="display">Display Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-center</td>
    <td>Centered content</td>
   </tr>
   <tr>
    <td>w3-left</td>
    <td>Floats an element to the left (float: left)</td>
   </tr>
   <tr>
    <td>w3-right</td>
    <td>Floats an element to the right (float: right)</td>
   </tr>
   <tr>
    <td>w3-left-align</td>
    <td>Left aligned text</td>
   </tr>
   <tr>
    <td>w3-right-align</td>
    <td>Right aligned text</td>
   </tr>
   <tr>
    <td>w3-justify</td>
    <td>Right and left aligned text</td>
   </tr>
   <tr>
    <td>w3-block</td>
    <td>Class that can be used to define a full width for any element</td>
   </tr>
   <tr>
    <td>w3-circle</td>
    <td>Circled content </td>
   </tr>
   <tr>
    <td>w3-hide</td>
    <td>Hidden content (display:none)</td>
   </tr>
   <tr>
    <td>w3-show</td>
    <td>Show content (display:block)</td>
    <td>
   </tr>
   <tr>
    <td>w3-show-block</td>
    <td>Alias of w3-show (display:block)</td>
    <td>
   </tr>
   <tr>
    <td>w3-show-inline-block</td>
    <td>Show content as inline-block (display:inline-block)</td>
    <td>
   </tr>
   <tr>
    <td>w3-top</td>
    <td>Fixed content at the top of a page</td>
   </tr>
   <tr>
    <td>w3-bottom</td>
    <td>Fixed content at the bottom of a page</td>
   </tr>
   <tr>
    <td>w3-display-container</td>
    <td>Container for w3-display-<em>classes</em> (position: relative)</td>
   </tr>
   <tr>
    <td>w3-display-topleft</td>
    <td>Displays content at the top left corner of the w3-display-container</td>
   </tr>
   <tr>
    <td>w3-display-topright</td>
    <td>Displays content at the top right corner of the w3-display-container</td>
   </tr>
   <tr>
    <td>w3-display-bottomleft</td>
    <td>Displays content at the bottom left corner of the w3-display-container</td>
   </tr>
   <tr>
    <td>w3-display-bottomright</td>
    <td>Displays content at the bottom right corner of the w3-display-container</td>
   </tr>
   <tr>
    <td>w3-display-left</td>
    <td>Displays content to the left (middle left) of the w3-display-container</td>
   </tr>
   <tr>
    <td>w3-display-right</td>
    <td>Displays content to the right (middle right) of the w3-display-container</td>
   </tr>
   <tr>
    <td>w3-display-middle</td>
    <td>Displays content in the middle (center) of the w3-display-container</td>
   </tr>
   <tr>
    <td>w3-display-topmiddle</td>
    <td>Displays content at the top middle of the w3-display-container</td>
   </tr>
   <tr>
    <td>w3-display-bottommiddle</td>
    <td>Displays content at the bottom middle of the w3-display-container</td>
   </tr>
   <tr>
    <td>w3-display-position</td>
    <td>Displays content at a specified position in the w3-display-container</td>
   </tr>
   <tr>
    <td>w3-display-hover</td>
    <td>Displays content on hover inside the w3-display-container</td>
   </tr>
  </tbody></table>
  <hr>
  <h2><a id="effect">Effect Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-opacity</td>
    <td>Adds opacity/transparency to an element (opacity: 0.6)</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Add opacity/transparency to text</td>
   </tr>
   <tr>
    <td>w3-opacity-off</td>
    <td>Turns off opacity/transparency (opacity: 1)</td>
   </tr>
   <tr>
    <td>w3-opacity-min</td>
    <td>Adds opacity/transparency to an element (opacity: 0.75)</td>
   </tr>
   <tr>
    <td>w3-opacity-max</td>
    <td>Adds opacity/transparency to an element (opacity: 0.25)</td>
   </tr>
   <tr>
    <td>w3-grayscale-min</td>
    <td>Adds a grayscale effect to an element (grayscale: 50%)</td>
   </tr>
   <tr>
    <td>w3-grayscale</td>
    <td>Adds a grayscale effect to an element (grayscale: 75%)</td>
   </tr>
   <tr>
    <td>w3-grayscale-max</td>
    <td>Adds a grayscale effect to an element (grayscale: 100%)</td>
   </tr>
   <tr>
    <td>w3-sepia-min</td>
    <td>Adds a sepia effect to an element (sepia: 50%)</td>
   </tr>
   <tr>
    <td>w3-sepia</td>
    <td>Adds a sepia effect to an element (sepia: 75%)</td>
   </tr>
   <tr>
    <td>w3-sepia-max</td>
    <td>Adds a sepia effect to an element (sepia: 100%)</td>
   </tr>
   <tr>
    <td>w3-overlay</td>
    <td>Creates an overlay effect</td>
   </tr>
  </tbody></table>
  <hr>
  <h2><a id="backgroundcolor">Background Color Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td class="w3-red">w3-red</td>
    <td>Background color red</td>
   </tr>
   <tr>
    <td class="w3-pink">w3-pink</td>
    <td>Background color pink</td>
   </tr>
   <tr>
    <td class="w3-purple">w3-purple</td>
    <td>Background color purple</td>
   </tr>
   <tr>
    <td class="w3-deep-purple">w3-deep-purple</td>
    <td>Background color deep purple</td>
   </tr>
   <tr>
    <td class="w3-indigo">w3-indigo</td>
    <td>Background color indigo</td>
   </tr>
   <tr>
    <td class="w3-blue">w3-blue</td>
    <td>Background color blue</td>
   </tr>
   <tr>
    <td class="w3-light-blue">w3-light-blue</td>
    <td>Background color light blue</td>
   </tr>
   <tr>
    <td class="w3-cyan">w3-cyan</td>
    <td>Background color cyan</td>
   </tr>
   <tr>
    <td class="w3-aqua">w3-aqua</td>
    <td>Background color aqua</td>
   </tr>
   <tr>
    <td class="w3-teal">w3-teal</td>
    <td>Background color teal</td>
   </tr>
   <tr>
    <td class="w3-green">w3-green</td>
    <td>Background color green</td>
   </tr>
   <tr>
    <td class="w3-light-green">w3-light-green</td>
    <td>Background color light green</td>
   </tr>
   <tr>
    <td class="w3-lime">w3-lime</td>
    <td>Background color lime</td>
   </tr>
   <tr>
    <td class="w3-sand">w3-sand</td>
    <td>Background color sand</td>
   </tr>
   <tr>
    <td class="w3-khaki">w3-khaki</td>
    <td>Background color khaki</td>
   </tr>
   <tr>
    <td class="w3-yellow">w3-yellow</td>
    <td>Background color yellow</td>
   </tr>
   <tr>
    <td class="w3-amber">w3-amber</td>
    <td>Background color amber</td>
   </tr>
   <tr>
    <td class="w3-orange">w3-orange</td>
    <td>Background color orange</td>
   </tr>
   <tr>
    <td class="w3-deep-orange">w3-deep-orange</td>
    <td>Background color deep orange</td>
   </tr>
   <tr>
    <td class="w3-blue-grey">w3-blue-grey</td>
    <td>Background color blue grey</td>
   </tr>
   <tr>
    <td class="w3-brown">w3-brown</td>
    <td>Background color brown</td>
   </tr>
   <tr>
    <td class="w3-light-grey">w3-light-grey</td>
    <td>Background color light grey</td>
   </tr>
   <tr>
    <td class="w3-grey">w3-grey</td>
    <td>Background color grey</td>
   </tr>
   <tr>
    <td class="w3-dark-grey">w3-dark-grey</td>
    <td>Background color dark grey</td>
   </tr>
   <tr>
    <td class="w3-black">w3-black</td>
    <td>Background color black</td>
   </tr>
   <tr>
    <td class="w3-pale-red">w3-pale-red</td>
    <td>Background color pale red</td>
   </tr>
   <tr>
    <td class="w3-pale-yellow">w3-pale-yellow</td>
    <td>Background color pale yellow</td>
   </tr>
   <tr>
    <td class="w3-pale-green">w3-pale-green</td>
    <td>Background color pale green</td>
   </tr>
   <tr>
    <td class="w3-pale-blue">w3-pale-blue</td>
    <td>Background color pale blue</td>
   </tr>
   <tr>
    <td>w3-transparent</td>
    <td>Transparent background-color</td>
    <td>&nbsp;</td>
   </tr>
  </tbody></table>
  <hr>
  <h2>Hover Color Classes</h2>
  <p>The colors above can also be used as hover classes:</p>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td class="w3-white">w3-hover-white</td>
    <td class="w3-hover-white">Hover color white</td>
   </tr>
   <tr>
    <td class="w3-black">w3-hover-black</td>
    <td class="w3-hover-black">Hover color black</td>
   </tr>
   <tr>
    <td class="w3-red">w3-hover-red</td>
    <td class="w3-hover-red">Hover color red</td>
   </tr>
   <tr>
    <td class="w3-blue">w3-hover-blue</td>
    <td class="w3-hover-blue">Hover color blue</td>
   </tr>
   <tr>
    <td class="w3-green">w3-hover-green</td>
    <td class="w3-hover-green">Hover color green</td>
   </tr>
   <tr>
    <td class="w3-aqua">w3-hover-aqua</td>
    <td class="w3-hover-aqua">Hover color aqua</td>
   </tr>
   <tr>
    <td class="w3-orange">w3-hover-orange</td>
    <td class="w3-hover-orange">Hover color orange</td>
   </tr>
   <tr>
    <td class="w3-grey">w3-hover-grey</td>
    <td class="w3-hover-grey">Hover color grey</td>
   </tr>
   <tr>
    <td class="w3-pale-green">w3-hover-pale-green</td>
    <td class="w3-hover-pale-green">Hover color pale green</td>
   </tr>
  </tbody></table>
  <hr>
  <h2><a id="textcolor">Text Color Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td class="w3-text-red"><b>w3-text-red</b></td>
    <td>Text color red</td>
   </tr>
   <tr>
    <td class="w3-text-green"><b>w3-text-green</b></td>
    <td>Text color green</td>
   </tr>
   <tr>
    <td class="w3-text-blue"><b>w3-text-blue</b></td>
    <td>Text color blue</td>
   </tr>
   <tr>
    <td class="w3-text-yellow"><b>w3-text-yellow</b></td>
    <td>Text color yellow</td>
   </tr>
   <tr>
    <td class="w3-text-light-grey"><b>w3-text-light-grey</b></td>
    <td>Text color light-grey</td>
   </tr>
   <tr>
    <td class="w3-text-grey"><b>w3-text-grey</b></td>
    <td>Text color grey</td>
   </tr>
   <tr>
    <td class="w3-text-dark-grey"><b>w3-text-dark-grey</b></td>
    <td>Text color dark grey</td>
   </tr>
   <tr>
    <td class="w3-text-black"><b>w3-text-black</b></td>
    <td>Text color black</td>
   </tr>
   <tr>
    <td class="w3-text-white"><b>w3-text-white</b></td>
    <td>Text color white</td>
   </tr>
   <tr>
    <td class="w3-text-pink"><b>w3-text-pink</b></td>
    <td>Text color pink</td>
   </tr>
   <tr>
    <td class="w3-text-deep-purple"><b>w3-text-purple</b></td>
    <td>Text color purple</td>
   </tr>
   <tr>
    <td class="w3-text-teal"><b>w3-text-teal</b></td>
    <td>Text color teal</td>
   </tr>
   <tr>
    <td class="w3-text-light-green"><b>w3-text-light-green</b></td>
    <td>Text color light green</td>
   </tr>
   <tr>
    <td class="w3-text-lime"><b>w3-text-lime</b></td>
    <td>Text color lime</td>
   </tr>
   <tr>
    <td class="w3-text-deep-purple"><b>w3-text-deep-purple</b></td>
    <td>Text color deep purple</td>
   </tr>
   <tr>
    <td class="w3-text-indigo"><b>w3-text-indigo</b></td>
    <td>Text color indigo</td>
   </tr>
   <tr>
    <td class="w3-text-light-blue"><b>w3-text-light-blue</b></td>
    <td>Text color light blue</td>
   </tr>
   <tr>
    <td class="w3-text-blue-grey"><b>w3-text-blue-grey</b></td>
    <td>Text color blue grey</td>
   </tr>
   <tr>
    <td class="w3-text-cyan"><b>w3-text-cyan</b></td>
    <td>Text color cyan</td>
   </tr>
   <tr>
    <td class="w3-text-aqua"><b>w3-text-aqua</b></td>
    <td>Text color aqua</td>
   </tr>
   <tr>
    <td class="w3-text-amber"><b>w3-text-amber</b></td>
    <td>Text color amber</td>
   </tr>
   <tr>
    <td class="w3-text-orange"><b>w3-text-orange</b></td>
    <td>Text color orange</td>
   </tr>
   <tr>
    <td class="w3-text-deep-orange"><b>w3-text-deep-orange</b></td>
    <td>Text color deep orange</td>
   </tr>
   <tr>
    <td class="w3-text-sand"><b>w3-text-sand</b></td>
    <td>Text color sand</td>
   </tr>
   <tr>
    <td class="w3-text-khaki"><b>w3-text-khaki</b></td>
    <td>Text color khaki</td>
   </tr>
   <tr>
    <td class="w3-text-brown"><b>w3-text-brown</b></td>
    <td>Text color brown</td>
   </tr>
  </tbody></table>
  <hr>
  <h2><a id="hover">Hover Text Classes</a></h2>
  <p>The text classes above can also be used as hover classes:</p>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td class="w3-text-red">w3-hover-text-red</td>
    <td class="w3-hover-text-red">Hover text color red</td>
   </tr>
   <tr>
    <td class="w3-text-green">w3-hover-text-green</td>
    <td class="w3-hover-text-green">Hover text color green</td>
   </tr>
   <tr>
    <td class="w3-text-blue">w3-hover-text-blue</td>
    <td class="w3-hover-text-blue">Hover text color blue</td>
   </tr>
   <tr>
    <td class="w3-text-yellow">w3-hover-text-yellow</td>
    <td class="w3-hover-text-yellow">Hover text color yellow</td>
   </tr>
  </tbody></table>
  <hr>
  <h2><a id="hover">Other Hover Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-hover-border-<em>color</em></td>
    <td>Hover border color</td>
   </tr>
   <tr>
    <td>w3-hover-opacity</td>
    <td>Adds transparency to an element on hover (opacity: 0.6)</td>
   </tr>
   <tr>
    <td>w3-hover-opacity-off</td>
    <td>Removes transparency from an element on hover (100% opacity)</td>
   </tr>
   <tr>
    <td>w3-hover-shadow</td>
    <td>Adds shadow to an element on hover</td>
   </tr>
   <tr>
    <td>w3-hover-grayscale</td>
    <td>Adds a black and white (100% grayscale) effect to an element</td>
   </tr>
   <tr>
    <td>w3-hover-sepia</td>
    <td>Adds a sepia effect to an element on hover</td>
   </tr>
   <tr>
    <td>w3-hover-none</td>
    <td>Removes hover effects from an element</td>
   </tr>
  </tbody></table>
  <hr>
  <h2><a id="round">Round Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-round</td>
    <td>Element rounded (border-radius) 4px</td>
   </tr>
   <tr>
    <td>w3-round-small</td>
    <td>Element rounded (border-radius) 2px</td>
   </tr>
   <tr>
    <td>w3-round-medium</td>
    <td>Element rounded (border-radius) 4px</td>
   </tr>
   <tr>
    <td>w3-round-large</td>
    <td>Element rounded (border-radius) 8px</td>
   </tr>
   <tr>
    <td>w3-round-xlarge</td>
    <td>Element rounded (border-radius) 16px</td>
   </tr>
   <tr>
    <td>w3-round-xxlarge</td>
    <td>Element rounded (border-radius) 32px</td>
   </tr>
  </tbody></table>
  <hr>
  
  <h2><a id="padding">Padding Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:50px"></th>
   </tr>
   <tr>
    <td>w3-padding-small</td>
    <td>Padding 4px top and bottom, and 8px left and right.</td>
   </tr>
   <tr>
    <td>w3-padding</td>
    <td>Padding 8px top and bottom, and 16px left and right.</td>
   </tr>
   <tr>
    <td>w3-padding-large</td>
    <td>Padding 12px top and bottom, and 24px left and right.</td>
   </tr>
   <tr>
    <td>w3-padding-16</td>
    <td>Padding 16px top and bottom</td>
   </tr>
   <tr>
    <td>w3-padding-24</td>
    <td>Padding 24px top and bottom</td>
   </tr>
   <tr>
    <td>w3-padding-32</td>
    <td>Padding 32px top and bottom</td>
   </tr>
   <tr>
    <td>w3-padding-48</td>
    <td>Padding 48px top and bottom</td>
   </tr>
   <tr>
    <td>w3-padding-64</td>
    <td>Padding 64px top and bottom</td>
   </tr>
   <tr>
    <td>w3-padding-top-64</td>
    <td>Padding 64px on top</td>
   </tr>
   <tr>
    <td>w3-padding-top-48</td>
    <td>Padding 48px on top</td>
   </tr>
   <tr>
    <td>w3-padding-top-32</td>
    <td>Padding 32px on top</td>
   </tr>
   <tr>
    <td>w3-padding-top-24</td>
    <td>Padding 24px on top</td>
   </tr>
  
  </tbody></table>
  <hr>
  
  <h2><a id="margin">Margin Classes</a></h2>
  <table class="ws-table-all w3-sans-serif">
   <tbody><tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-margin</td>
    <td>Adds an 16px margin to an element</td>
   </tr>
   <tr>
    <td>w3-margin-top</td>
    <td>Adds an 16px top margin to an element</td>
   </tr>
   <tr>
    <td>w3-margin-right</td>
    <td>Adds an 16px right margin to an element</td>
   </tr>
   <tr>
    <td>w3-margin-bottom</td>
    <td>Adds an 16px bottom margin to an element</td>
   </tr>
   <tr>
    <td>w3-margin-left</td>
    <td>Adds an 16px left margin to an element</td>
   </tr>
   <tr>
    <td>w3-section</td>
    <td>Adds an 16px top and bottom margin to an element</td>
   </tr>
  </tbody></table>
  
  <hr>
  <h2><a id="border">Border Classes</a></h2>
  <table class="ws-table-all w3-sans-serif"><tbody>
   <tr>
    <th style="width:166px">Class</th>
    <th>Defines</th>
    <th style="width:40px"></th>
   </tr>
   <tr>
    <td>w3-border</td>
    <td>Borders (top, right, bottom, left) </td>
   </tr>
   <tr>
    <td>w3-border-top</td>
    <td>Border top</td>
   </tr>
   <tr>
    <td>w3-border-right</td>
    <td>Border right</td>
   </tr>
   <tr>
    <td>w3-border-bottom</td>
    <td>Border bottom</td>
   </tr>
   <tr>
    <td>w3-border-left</td>
    <td>Border left</td>
   </tr>
   <tr>
    <td>w3-border-0</td>
    <td>Removes all borders</td>
   </tr>
   <tr>
    <td>w3-border-<em>color</em></td>
    <td>Displays any defined borders in a specified color (like red, etc)</td>
   </tr>
   <tr>
    <td>w3-bottombar</td>
    <td>Adds a thick bottom border (bar) to an element</td>
   </tr>
   <tr>
    <td>w3-leftbar</td>
    <td>Adds a thick left border (bar) to an element</td>
   </tr>
   <tr>
    <td>w3-rightbar</td>
    <td>Adds a thick right border (bar) to an element</td>
   </tr>
   <tr>
    <td>w3-topbar</td>
    <td>Adds a thick top border (bar) to an element</td>
   </tr>
   <tr>
    <td>w3-hover-border-<em>color</em></td>
    <td>Hoverable border color</td>
   </tr>
  </tbody></table>
</body>
</html>
